<template>
	<view class="page">
		<!-- 导航 -->
		<view class="nav-bar">
			<view class="nav-bar-back">
				<u-icon name="arrow-leftward" size="45rpx" @click="goback"></u-icon>
				<view class="nav-bar-back-title">
					<text class="nav-bar-back-title-txt">音乐云盘</text>
					<text>0.1G/{{result.maxSize | dates}}</text>
				</view>
			</view>
			<view class="nav-bar-seach">
				<u-icon name="search" size="55rpx"></u-icon>
			</view>
		</view>

		<!-- 遍历的数据 -->
		<view class="container">
			<view class="media">
				<view class="media-left">
					<u-icon name="play-circle-fill" size="50rpx"></u-icon>
					<text>播放全部</text>
					<text style="font-size: 30rpx;color: #999;">({{result.count}})</text>
				</view>
				<view class="media-right">
					<u-icon name="list" size="50rpx"></u-icon>
				</view>
			</view>
			<view class="list-info" v-for="(item,index) in result.data" :key="index"
				@tap="playMusic(item.simpleSong.id,index)">
				<view class="list-info-left">
					<text class="list-info-left-index">{{index + 1}}</text>
					<view class="list-info-left-name">
						<text style="font-size: 30rpx;">{{item.songName}}</text>
						<text style="font-size: 12rpx;color: #999;">{{item.artist ||'未知'}}-{{item.album}}</text>
					</view>
				</view>

				<view class="list-info-right">
					<image src="@/static/songs/mvs.png" mode=""></image>
					<image src="@/static/songs/more.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 到底提示 -->
		<view class="bottom">
			<text>歌曲永久保存，随时随地多端畅听</text>
		</view>
		<view class="upload">
			<image src="https://via.placeholder.com/80x80.png/d7d7d6" mode=""></image>
		</view>
		<view class="play">
			<play></play>
		</view>



	</view>
</template>

<script>
	import play from '@/components/plays.vue'

	import {
		_getCloudDisk,
	} from '@/http/mine.js'
	export default {
		components: {
			play
		},
		data() {
			return {
				result: [],
				info: uni.getStorageSync('UserData').profile, //获取本地缓存的数据
			};
		},
		methods: {
			async Cloud() {
				const res = await _getCloudDisk()
				this.result = res
				console.log(this.result);
			},
			// 点击播放
			playMusic(id, index) {
				this.$store.dispatch("playIndex", index);
				this.$store.dispatch("playMusic", {
					list: this.result,
					index: index,
					listid: sid
				})
			},
			// 回到上一级
			goback() {
				uni.switchTab({
					url: "/pages/Mine/index"
				})
			},

		},
		filters: {
			dates(time) {
				return (time / (1024 * 1024 * 1024)) + "G";
			}


		},
		created() {
			this.Cloud()
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f6f6f6;
	}

	.nav-bar {
		padding: 10rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e5e5e5;
		
		&-back {
			display: flex;

			&-title {
				display: flex;
				flex-direction: column;
				margin-left: 25rpx;
				font-size: 25rpx;

				&-txt {
					font-size: 30rpx;
				}
			}
		}
	}

	.container {
		padding: 20rpx 30rpx;
		font-family: STXihei;

		.media {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				display: flex;
				align-items: center;

				text {
					margin-left: 15rpx;
					font-size: 33rpx;
				}
			}
		}

		.list-info {
			margin-top: 35rpx;
			display: flex;
			justify-content: space-between;

			&-left {
				display: flex;
				align-items: center;

				&-index {
					width: 45rpx;
					text-align: center;
				}

				&-name {
					display: flex;
					flex-direction: column;
					margin-left: 25rpx;
					line-height: 45rpx;
				}
			}

			&-right {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
	}

	.bottom {
		margin: 30rpx 0rpx;
		text-align: center;
		font-size: 25rpx;
		color: #999;
	}
	
	.upload{
		position: fixed;
		bottom: 8%;
		margin-left: 30rpx;
		
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	
	.play{
		width: 100%;
		height: 5rpx;
		position: absolute;
		bottom: 0;
	}
</style>
